<!--
 @description 立面问题列表
 @fileName FileList.vue
 @author zengqiongying
 @created 2023/06/15 14:53:46
-->
<template>
  <div class="facade-file-list">
    <List ref="qmpList" v-model:finished="finished" :reset-fun="resetData" :load="load" :refresh="load">
      <FileItem
        v-for="(item, i) in list"
        :key="`${i}-${item.ffid}`"
        :detail="item"
        :readonly="readonly"
        @edit="onEdit(item)"
        @delete="onDelete(item.ffid)"
      />
      <qmp-empty
        v-if="readonly && finished && list.length === 0"
        :description="facadeDetail.facadeStatus === 1 ? '立面未验收' : '暂无立面问题'"
        image-size="60px"
      />
    </List>
    <FileAdd
      v-if="facadeDetail.sfid"
      v-model:show="showAdd"
      :detail="activeEditData"
      :facade-detail="facadeDetail"
      @success="resetPageData"
    />
  </div>
</template>

<script lang="ts">
  import { ref, reactive, toRefs, defineComponent, getCurrentInstance, watch } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import List from '@/components/List/index.vue'
  import FileItem from './FileItem.vue'
  import FileAdd from './FileAdd.vue'
  import { IAnyKeyObject } from '@/types/common'
  import { queryModuleAllFacade, queryFacadeFile, queryFacadeDetail } from '@/apis/Facade'
  import { FileDelete } from '@/mixins/TaskCommon'
  import { nextTick } from 'process'
  export default defineComponent({
    name: 'FFilesList',
    components: { List, FileItem, FileAdd },
    props: {
      reportModel: {
        // 整改状态(0.全部 1.未整改 2.已整改)
        type: [String, Number],
        default: 0
      },
      amid: {
        // 区域ID
        type: String,
        default: ''
      },
      sfid: {
        // 立面ID
        type: String,
        default: ''
      },
      readonly: {
        type: Boolean,
        default: false
      },
      searchValue: {
        type: String,
        default: ''
      }
    },
    setup(props, { emit }) {
      const { proxy }: any = getCurrentInstance()
      const $route = useRoute()
      const $router = useRouter()
      const qmpList = ref()
      const datas = reactive<IAnyKeyObject>({
        list: [],
        finished: false,
        showAdd: false,
        activeEditData: {},
        facadeDetail: {} // 立面详情
      })

      const load = async (page: number, rows: number) => {
        const params = {
          amid: props.amid,
          reportModel: props.reportModel
        }
        let queryFunction = props.sfid ? queryFacadeDetail(props.sfid) : queryModuleAllFacade(params)
        return queryFunction.then((res: any) => {
          datas.facadeDetail = res.data || {}
          let oList = []
          if (props.sfid) {
            oList = res.data?.files || []
            oList.forEach((v: any) => {
              v.facadeName = datas.facadeDetail.facadeName
            })
          } else {
            oList = res.data || []
          }
          let list = []
          if (!['', null, undefined].includes(props.searchValue)) {
            // 筛选关键字
            list = oList.filter((v: any) => {
              if (
                v.projectNature.indexOf(props.searchValue) > -1 ||
                v.problemProperty.indexOf(props.searchValue) > -1
              ) {
                return true
              }
              if (v.problemPropertyPattern && v.problemPropertyPattern.indexOf(props.searchValue) > -1) {
                return true
              }
              return v.imgCustomName.indexOf(props.searchValue) > -1
            })
          } else {
            list = oList
          }
          if (page === 1) {
            datas.list = list
          } else {
            datas.list = datas.list.concat(list)
          }
          datas.finished = true
        })
      }
      const resetData = () => {
        datas.list = []
      }
      const resetPageData = () => {
        qmpList.value.resetPageData()
      }

      const refreshItem = (ffid: string) => {
        const flag = datas.list.some((v: any) => v.ffid === ffid)
        if (!flag) return

        queryFacadeFile(ffid).then((res) => {
          const d = res.data
          if (d && d.id) {
            datas.list = datas.list.map((item: any) => {
              if (item.ffid === ffid) {
                item = { ...res.data }
              }
              return item
            })
          }
        })
      }

      watch(
        () => props.reportModel,
        () => {
          resetPageData()
        }
      )

      watch(
        () => props.sfid,
        () => {
          resetPageData()
        }
      )

      // 编辑问题
      const onEdit = (data?: any) => {
        if (data && data.sfid) {
          const { acceptID, amid, sfid, facadeName } = data
          datas.facadeDetail = { acceptID, amid, sfid, facadeName }
        }
        datas.activeEditData = data || {}
        nextTick(() => {
          datas.showAdd = true
        })
      }

      // 删除问题
      const onDelete = (ffid: string) => {
        FileDelete(ffid, () => {
          resetPageData()
        })
      }
      return {
        ...toRefs(datas),
        load,
        resetData,
        qmpList,
        resetPageData,
        refreshItem,
        onDelete,
        onEdit
      }
    }
  })
</script>
<style lang="less" scoped></style>
